<template>
  <div class="customcss none abs trbl0 rds5 bgf5">
    <div class="abs trbl0 fs12 ovya" style="">
      <!--左侧部分-->
      <div div class="abs t0 b0 l0 rds5 pt20 pl20 pr20 bgf ovya" style="width:260px;">
        <div class="fs14 b mb10">布局字段</div>
        <div class="f xb rw none">
          <div v-for="item in cusLayoutForm" :key="item.id" :draggable="true" @dragstart="formTypeDragStart(item)" @dragend.stop="e => dragEnd(e)" class="w48 rds3 pt5 pb5 f ac xc mb10 poi hoverFormType" style="border:1px dashed #ccc;">
            {{item.label}}
          </div>
        </div>
        <div class="fs14 b mt10 mb10">通用字段</div>
        <div class="f xb rw none">
          <div v-for="item in commonForm" :key="item.id" :draggable="true"@dragstart="formTypeDragStart(item)" @dragend.stop="e => dragEnd(e)" class="w48 rds3 pt5 pb5 f ac xc mb10 poi hoverFormType" style="border:1px dashed #ccc;">
            {{item.label}}
          </div>
        </div>
        <div class="fs14 b mt10 mb10">病历字段</div>
        <div class="f xb rw none">
          <div v-for="item in customForm" :key="item.id" :draggable="true" @dragstart="formTypeDragStart(item)" @dragend.stop="e => dragEnd(e)" class="w48 rds3 pt5 pb5 f ac xc mb10 poi hoverFormType" style="border:1px dashed #ccc;">
            {{item.label}}
          </div>
        </div>
      </div>
      <!--中间部分-->
      <div div class="abs t0 b0 rds5 fs14 bgf ovh" style="left:270px;right:310px;">
        <div class="abs trbl0 pt20 pb20" style="bottom:60px;">
          <div class="f mb20 pl20 pr20">
            <div class="f1 f ac">
              <div class="b">表单类型：</div>
              <div class="b mr15">随访表单</div>
              <div class="f1 f ac xe">
                <Button @click="previewForm" type="info" size="small" class="mr15">预览</Button>
                <Button @click="exportJson" type="info" size="small" class="mr15">生成json</Button>
                <Button @click="showImportJson" type="info" size="small" class="mr15">导入json</Button>
              </div>
            </div>
          </div>
          <div class="pl30 pr30">
            <Form ref="formDesc" :model="formData" :rules="formRule" label-position="right" :label-width="90">
              <div class="f" >
                <div class="f1">
                  <FormItem label="表单名称" prop="name">
                    <Input v-model="formData.name" v-limit="[0, 20]" style="width:100%;" placeholder="请输入"></Input>
                  </FormItem>
                </div>
                <!-- <div class="f1">
                  <FormItem label="随访类型" prop="visitType">
                    <Select label-in-value v-model="formData.visitType" class="mr10" style="width:140px;" placeholder="请选择">
                      <Option value="1">高血压随访</Option>
                      <Option value="2">糖尿病随访</Option>
                    </Select>
                  </FormItem>
                </div> -->
                <div class="f1">
                  <FormItem label="说明">
                    <Input v-model="formData.illustrate" style="width:100%;" placeholder="请输入"></Input>
                  </FormItem>
                </div>
              </div>
            </Form>
          </div>
          <div class="mb20" style="border-top:1px solid #d5d5d5;"></div>
          <div
            @dragenter.stop="e => dragenterInBox(e)"
            @drop.stop="e => dragInBox(e)"
            @dragover.stop="e => e.preventDefault()"
            class="abs l0 r0 b0 zx1 pb100 ovya pt10" style="top:120px;padding-bottom:500px;"
          >
            <!--表单构造器-->
            <div
              v-for="(item, index) in operateForm" :key="item.id"
              :class="[isShowAni ? 'trans5' : '']"
              :style="{transform:`translate(${item.translateX || 0}px,${item.translateY || 0}px)`}"
              :ref="`card${item.id}`"
              @dragstart.stop="e => dragstart(e, index, item)"
              @dragenter.stop="e => dragenter(e, index, item)"
              @drop.stop="e => dropCurBox(e, index)"
              @dragover.stop="e => e.preventDefault()"
              @dragend.stop="e => dragEnd(e)"
              :draggable="formType == 1"
            > 
              <div v-if="mouseHoverItem.id == item.id" :class="['abs l0 r0 zx10 op6', direction == 'top' ? 't-6px' : direction == 'bottom' ?'b-6px' : 'b-6px']" style="height:6px;background:#1adaa7;"></div>
              <div @click="formType == 1 ? clickItem(item, index) : ''" :class="['rel bdtransparent tran3 poi rds3 pl30 pr30', formType == 1 ? 'hoverForm' : '', formType == 1 && item.isChecked ? 'bdBox' : '']">
                <div v-if="formType == 1 && item.isChecked" class="abs t0 l0 f ac xc bgDrag move" style="width:24px;height:24px;">
                  <svg t="1690001682136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2933" width="18" height="18"><path d="M512 85.333333h0.768c1.024 0 2.048 0.085333 3.029333 0.170667L512 85.333333a43.008 43.008 0 0 1 26.666667 9.386667l3.498666 3.114667 104.746667 104.704a42.666667 42.666667 0 0 1-56.32 63.914666l-4.053333-3.541333L554.666667 230.954667v238.336h238.336l-31.872-31.829334a42.666667 42.666667 0 0 1-3.541334-56.32l3.541334-4.053333a42.666667 42.666667 0 0 1 56.32-3.541333l4.053333 3.541333 104.704 104.746667c1.237333 1.194667 2.346667 2.517333 3.413333 3.84l-3.413333-3.84a43.008 43.008 0 0 1 12.458667 28.757333L938.666667 512v1.365333l-0.170667 2.304L938.666667 512a43.008 43.008 0 0 1-9.386667 26.666667l-3.114667 3.498666-104.704 104.746667a42.666667 42.666667 0 0 1-63.914666-56.32l3.541333-4.053333 31.914667-31.914667h-238.378667v238.378667l31.914667-31.914667a42.666667 42.666667 0 0 1 56.32-3.541333l4.053333 3.541333a42.666667 42.666667 0 0 1 3.541333 56.32l-3.541333 4.053333-104.746667 104.704a42.922667 42.922667 0 0 1-3.84 3.413334l3.84-3.413334a43.008 43.008 0 0 1-28.8 12.458667L512 938.666667h-1.408l-2.218667-0.170667L512 938.666667a43.008 43.008 0 0 1-26.154667-8.96 44.245333 44.245333 0 0 1-4.010666-3.541334l-104.746667-104.704a42.666667 42.666667 0 0 1 56.32-63.914666l4.053333 3.541333 31.829334 31.872v-238.336H230.954667l31.957333 31.914667a42.666667 42.666667 0 0 1 3.541333 56.32l-3.541333 4.053333a42.666667 42.666667 0 0 1-56.32 3.541333l-4.053333-3.541333-104.704-104.746667-3.114667-3.498666a42.88 42.88 0 0 1-0.298667-0.341334l3.413334 3.84A43.008 43.008 0 0 1 85.333333 512.853333v-1.664c0-0.981333 0.085333-1.962667 0.170667-2.986666L85.333333 512a43.008 43.008 0 0 1 8.96-26.154667c1.194667-1.493333 2.304-2.816 3.541334-4.010666l104.704-104.746667a42.666667 42.666667 0 0 1 63.914666 56.32l-3.541333 4.053333-31.914667 31.829334h238.293334V230.997333l-31.829334 31.914667a42.666667 42.666667 0 0 1-56.32 3.541333l-4.053333-3.541333a42.666667 42.666667 0 0 1-3.541333-56.32l3.541333-4.053333 104.746667-104.704 3.498666-3.114667 0.341334-0.298667-3.84 3.413334A43.008 43.008 0 0 1 511.146667 85.333333H512z" fill="#ffffff" p-id="2934"></path></svg>
                </div>
                <div v-if="formType == 1 && item.isChecked" @click="delItem(item)" class="abs b0 r0 f ac xc bgDrag poi zx100" style="width:24px;height:24px;">
                  <svg t="1690002537416" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4004" width="18" height="18"><path d="M808.6 339.3c-12 0-21.7 9.7-21.7 21.7v496.2c0 32.8-26.6 59.3-59.3 59.3H296.8c-32.8 0-59.3-26.6-59.3-59.3V361c0-12-9.7-21.7-21.7-21.7s-21.7 9.7-21.7 21.7v496.2C194 914 240.1 960 296.7 960h430.6C784 960 830 914 830 857.3V361c0.3-12-9.4-21.7-21.4-21.7zM897.9 238H749.1V127.8c0-35.2-28.7-63.8-63.8-63.8H339.9c-35.2 0-63.8 28.7-63.8 63.8v110.3H125.7c-12 0-21.7 9.7-21.7 21.7s9.7 21.7 21.7 21.7h772.1c12 0 21.7-9.7 21.7-21.7 0.1-12.1-9.6-21.8-21.6-21.8zM319.5 127.8c0-11.3 9.1-20.4 20.4-20.4h345.3c11.3 0 20.4 9.1 20.4 20.4V238H319.5V127.8z m0 0" p-id="4005" fill="#ffffff"></path><path d="M615.8 774.4c12 0 21.7-9.7 21.7-21.7V359.5c0-12-9.7-21.7-21.7-21.7s-21.7 9.7-21.7 21.7v393.2c0.1 12 9.8 21.7 21.7 21.7z m-209.1 0c12 0 21.7-9.7 21.7-21.7V359.5c0-12-9.7-21.7-21.7-21.7s-21.7 9.7-21.7 21.7v393.2c0 12 9.7 21.7 21.7 21.7z m0 0" p-id="4006" fill="#ffffff"></path></svg>
                </div>
                <div v-if="formType == 1 && item.type != 'split'" class="abs trbl0 zx10" style="background:transparent;"></div>
                <CusSplit
                  v-if="item.type == 'split'"
                  :item="item" @setItem="e=>item=e" 
                  :formData="operateForm" @setFormData="e=>operateForm=e" 
                  :checkedItem="checkedItem" @setCheckedItem="e => checkedItem=e" 
                  :curFormObj="curFormObj" 
                  :dragType="dragType" 
                  :mouseHoverItem="mouseHoverItem" @setMouseHoverItem="e => mouseHoverItem =e"
                >
                </CusSplit>
                <CusText v-if="item.type == 'text'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusText>
                <CusDivide v-if="item.type == 'divide'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusDivide>
                <CusInput v-if="item.type == 'input'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusInput>
                <CusTextArea v-if="item.type == 'textarea'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusTextArea>
                <CusRadio v-if="item.type == 'radio'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusRadio>
                <CusCheckBox v-if="item.type == 'checkbox'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusCheckBox>
                <CusSelect v-if="item.type == 'select'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusSelect>
                <CusDate v-if="item.type == 'date'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusDate>
                <!-- <CusDateRange v-if="item.type == 'dateRange'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusDateRange> -->
                <CusUploadFile v-if="item.type == 'uploadFile'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusUploadFile>
                <CusUploadImg v-if="item.type == 'uploadImg'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusUploadImg>
                <CusBloodPressure v-if="item.type == 'bloodPressure'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusBloodPressure>
                <CusPulseDorsalis v-if="item.type == 'pulseDorsalis'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusPulseDorsalis>
                <CusCurrentAndTarget v-if="item.type == 'currentAndTarget'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusCurrentAndTarget>
                <CusMedicine v-if="item.type == 'medicine'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusMedicine>
                <CusSymptom v-if="item.type == 'symptom'" :item="item" @setItem="e=>item=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusSymptom>
                <div v-if="mouseHoverItem.id == -1 && index == operateForm.length - 1" class="abs l0 r0 op6" style="height:6px;background:#1adaa7;bottom:-6px;"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="abs b0 l0 r0 pt10 pb10 f ac xc bgf" style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2)">
          <div @click="submit" class="db auto f ac xc gf rds4 lt3 fs16 poi" style="height:34px;width:120px;background: #1AADA7;">{{$route.query.formId ? '更新表单' : '生成表单'}}</div>
        </div>
      </div>
      <!--右侧配置部分-->
      <div div class="abs t0 b0 r0 rds5 bgf ovya" style="width:300px;">
        <div class="f fs14 tc rel bdbe">
          <div @click="tabIndex = 0" class="f1 poi pt10 pb10 b" :style="{ color: tabIndex == 0 ? '' : '',  }">字段属性</div>
          <!-- <div @click="tabIndex = 1" class="f1 poi pt10 pb10" :style="{ color: tabIndex == 1 ? '#1AADA7' : '', }">进阶配置</div> -->
          <!-- <div class="abs b0 trans3" :style="{ backgroundColor: '#1AADA7', width: '148px', height: '2px', transform: `translateX(${150 * tabIndex}px)` }"></div> -->
        </div>
        <div class="ovh abs fs14 l0 r0 b0" style="top:55px;">
          <div :class="['abs tl pl10 pr10 pb30 trbl0 ovya trans3', tabIndex == 0 ? 'tx0' : tabIndex < 0 ? 'tx100' : 'tx-100']">
            <CusSplitSet v-show="checkedItem.type=='split' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusSplitSet>
            <CusTextSet v-show="checkedItem.type=='text' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusTextSet>
            <CusDivideSet v-show="checkedItem.type=='divide' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusDivideSet>
            <CusInputSet v-show="checkedItem.type=='input' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusInputSet>
            <CusTextAreaSet v-show="checkedItem.type=='textarea' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusTextAreaSet>
            <CusRadioSet v-show="checkedItem.type=='radio' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusRadioSet>
            <CusCheckBoxSet v-show="checkedItem.type=='checkbox' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusCheckBoxSet>
            <CusSelectSet v-show="checkedItem.type=='select' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusSelectSet>
            <CusDateSet v-show="checkedItem.type=='date' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusDateSet>
            <!-- <CusDateRangeSet v-show="checkedItem.type=='dateRange'" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusDateRangeSet> -->
            <CusUploadFileSet v-show="checkedItem.type=='uploadFile' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusUploadFileSet>
            <CusUploadImgSet v-show="checkedItem.type=='uploadImg' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusUploadImgSet>
            <CusBloodPressureSet v-show="checkedItem.type=='bloodPressure' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusBloodPressureSet>
            <CusPulseDorsalisSet v-show="checkedItem.type=='pulseDorsalis' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusPulseDorsalisSet>
            <CusCurrentAndTargetSet v-show="checkedItem.type=='currentAndTarget' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusCurrentAndTargetSet>
            <CusMedicineSet v-show="checkedItem.type=='medicine' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusMedicineSet>
            <CusSymptomSet v-show="checkedItem.type=='symptom' && checkedItem.id" :item="checkedItem" @setItem="e=>checkedItem=e" :formData="operateForm" @setFormData="e=>operateForm=e"></CusSymptomSet>
            <!-- <div v-if="formType == 2" class="abs trbl0 zx10" style="background:transparent;"></div> -->
          </div>
          <div :class="['abs trbl0 ovh', tabIndex == 1 ? 'tx0' : tabIndex < 1 ? 'tx100' : 'tx-100']">
          </div>
        </div>
      </div>
    </div>
    <!--表单预览-->
    <PreviewForm :modalType="modalType" @setModalType="setModalType" :formArr="operateForm"></PreviewForm>
    <!--导出json-->
    <ExportJson :isShow="isShowExportJson" @setIsShow="e => isShowExportJson = e" :operateForm="operateForm"></ExportJson>
    <!--导入json-->
    <ImportJson :isShow="isShowImportJson" @setIsShow="e => isShowImportJson = e" :operateForm="operateForm" @setOperateForm="e => operateForm = e"></ImportJson>
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped></style>
<style>
pre {white-space: pre-wrap;font-family: 'Courier New', monospace;margin: 0;}
.string {color: #98C379;}
.number {color: #D19A66;}
.boolean {color: #56B6C2;}
.null {color: #C586C0;}
.key { color: #E06C61;}
.array{
  color: green;
}
.hoverbg:hover{
  background: #eee;
}
</style>